<template>
	<div class="view">
		<h1 class="title">欢迎登录</h1>
		<Form ref="form" 
			:model="data" 
			:rules="ruleValidate">
			
			<Form-item prop="username">
				<Input 
					type="text" 
					v-model="data.username" 
					placeholder="请输入手机号" 
					size="large">
				</Input>
			</Form-item>

			<Form-item prop="pwd">
				<Input type="password" 
					v-model="data.pwd" 
					placeholder="请输入密码" 
					@on-enter="click2Login"
					size="large">
				</Input>
			</Form-item>
			<Checkbox v-model="data.isRem" 
				class="checkbox">
				记住密码
			</Checkbox>
			
			<p class="forget" @click="click2ForgetPwd">
				忘记密码？
			</p>
			
			<Form-item>
				<Button 
					type="primary" 
					size="large"
					long 
					:loading="data.isSubmitLoading"
					@click="click2Login">
					登 录
				</Button>
			</Form-item>
			
		</Form>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
					username: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}],
					pwd: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			click2ForgetPwd() {
				this.$emit('on-action', 'forget-pwd', this.data)
			},
			click2Login() {
				var $this = this;
				this.$refs['form'].validate((valid) => {
					if (valid) {
                    		$this.$emit('on-action', 'login', this.data)
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
				})
			}
		},
		mounted: function() {
		}
	}
</script>

<style scoped="scoped">
.view {
	background-color: rgba(255, 255, 255, 0.87);
	width: 360px;
	height: 300px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	margin-left: auto;
	margin-right: 150px;
	padding: 30px;
}

.view .title {
	font-size: 20px;
	color: rgba(0, 0, 0, 0.87);
	margin-bottom: 20px;
}

.view .checkbox {
	margin-bottom: 20px;
}

.view .forget {
	float: right;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.87);
	cursor: pointer;
}

.view .forget:hover {
	color: #3399ff;
}
</style>